<template>
  <div class="my-services-page">
    <h1>我的服务</h1>
    <el-card class="services-table-card">
      <template #header>
        <div class="card-header">
          <span>我的活动列表</span>
        </div>
      </template>

      <el-table :data="activities" style="width: 100%" border>
        <el-table-column prop="activityId" label="活动ID" width="180" />
        <el-table-column prop="name" label="活动名称" width="200" />
        <el-table-column prop="type" label="类型" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="活动时间" width="180" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalActivities"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailsDialogVisible"
      title="活动详情"
      width="500px"
    >
      <p><strong>活动ID:</strong> {{ selectedActivityDetails?.activityId }}</p>
      <p><strong>活动名称:</strong> {{ selectedActivityDetails?.name }}</p>
      <p><strong>类型:</strong> {{ selectedActivityDetails?.type }}</p>
      <p><strong>状态:</strong> <el-tag :type="getStatusTagType(selectedActivityDetails?.status)">{{ selectedActivityDetails?.status }}</el-tag></p>
      <p><strong>活动时间:</strong> {{ selectedActivityDetails?.time }}</p>
      <p><strong>地点:</strong> {{ selectedActivityDetails?.location }}</p>
      <p><strong>描述:</strong> {{ selectedActivityDetails?.description }}</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="detailsDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const activities = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalActivities = ref(0)

const detailsDialogVisible = ref(false)
const selectedActivityDetails = ref(null)

const getStatusTagType = (status) => {
  switch (status) {
    case '已报名':
      return 'info'
    case '已完成':
      return 'success'
    case '进行中':
      return 'warning'
    case '已答完':
      return 'success'
    default:
      return ''
  }
}

const mockActivities = [
  {
    activityId: 'A202403200001',
    name: '西湖水质监测',
    type: '护水行动',
    status: '已报名',
    time: '2024-03-25 09:00-11:00',
    location: '西湖风景区',
    description: '参与西湖水质的日常监测工作。',
  },
  {
    activityId: 'A202403200002',
    name: '电池回收',
    type: '资源回收',
    status: '已完成',
    time: '2024-03-15 09:00-11:00',
    location: '社区回收站',
    description: '将废旧电池集中回收，避免污染环境。',
  },
  {
    activityId: 'A202403200003',
    name: '关爱老人行动',
    type: '公益之星',
    status: '已报名',
    time: '2024-04-25 09:00-11:00',
    location: 'XX养老院',
    description: '定期探访养老院老人，提供陪伴和帮助。',
  },
  {
    activityId: 'A202403200004',
    name: '募捐-为山区助力',
    type: '公益之星',
    status: '进行中',
    time: '2024-03-22 09:00-11:00',
    location: '线上平台',
    description: '为山区贫困儿童募捐学费和学习用品。',
  },
  {
    activityId: 'A202403200005',
    name: '城市绿化志愿者',
    type: '公益之星',
    status: '已完成',
    time: '2024-03-10 14:00-16:00',
    location: '市中心公园',
    description: '参与城市公园的植树和维护工作。',
  },
  {
    activityId: 'A202403200006',
    name: '苏州—节水资源答题',
    type: '护水行动',
    status: '已答完',
    time: '2024-03-22 09:00-11:00',
    location: '线上平台',
    description: '参与线上节水知识问答，赢取环保积分。',
  },
  {
    activityId: 'A202403200007',
    name: '旧书捐赠活动',
    type: '资源回收',
    status: '已报名',
    time: '2024-04-05 10:00-12:00',
    location: '大学图书馆',
    description: '捐赠闲置旧书，支持乡村图书馆建设。',
  },
  {
    activityId: 'A202403200008',
    name: '爱心义卖会',
    type: '公益之星',
    status: '进行中',
    time: '2024-04-10 10:00-17:00',
    location: '商业步行街',
    description: '义卖手工艺品，所得款项用于慈善项目。',
  },
  {
    activityId: 'A202403200009',
    name: '社区环保宣传',
    type: '护水行动',
    status: '已完成',
    time: '2024-03-01 09:00-11:00',
    location: '社区宣传栏',
    description: '张贴环保海报，向居民宣传环保知识。',
  },
  {
    activityId: 'A202403200010',
    name: '废旧电器回收',
    type: '资源回收',
    status: '已报名',
    time: '2024-04-12 13:00-16:00',
    location: '电器回收中心',
    description: '回收废旧家用电器，进行环保处理。',
  },
]

const fetchActivities = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  activities.value = mockActivities.slice(start, end)
  totalActivities.value = mockActivities.length
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchActivities()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchActivities()
}

const viewDetails = (activity) => {
  selectedActivityDetails.value = activity
  detailsDialogVisible.value = true
}

onMounted(() => {
  fetchActivities()
})
</script>

<style scoped>
.my-services-page {
  padding: 20px;
  background-color: #f0f2f5;
}

h1 {
  color: #303133;
  margin-bottom: 20px;
  text-align: center;
}

.services-table-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table {
  margin-top: 15px;
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 